<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="用户管理" name="first">
        <el-table style="width: 100%" :data="tableData" @cell-dblclick="handle">
          <el-table-column prop="id" label="ID" width="80"></el-table-column>
          <el-table-column prop="name" label="姓名" width="100">
            <template slot-scope="scope">
              <div v-if="!scope.row.isEdit">{{ scope.row.name }}</div>
              <div v-else>
                <el-input v-model="scope.row.name"></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="sex" label="性别" width="100">
            <template slot-scope="scope">
              <div v-if="!scope.row.isEdit">{{ scope.row.sex }}</div>
              <div v-else>
                <el-input v-model="scope.row.sex"></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="手机号" width="180">
            <template slot-scope="scope">
              <div v-if="!scope.row.isEdit">{{ scope.row.phone }}</div>
              <div v-else>
                <el-input v-model="scope.row.phone"></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="地址" width="250">
            <template slot-scope="scope">
              <div v-if="!scope.row.isEdit">{{ scope.row.address }}</div>
              <div v-else>
                <el-input v-model="scope.row.address"></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="email" label="邮箱" width="250">
            <template slot-scope="scope">
              <div v-if="!scope.row.isEdit">{{ scope.row.email }}</div>
              <div v-else>
                <el-input v-model="scope.row.email"></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="id_card" label="身份证" width="300">
            <template slot-scope="scope">
              <div v-if="!scope.row.isEdit">{{ scope.row.id_card }}</div>
              <div v-else>
                <el-input v-model="scope.row.id_card"></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="birthday" label="生日">
            <template slot-scope="scope">
              <div v-if="!scope.row.isEdit">
                {{ scope.row.birthday}}
              </div>
              <div v-else>
                <el-input v-model="scope.row.birthday"></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="按钮">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)">{{
                scope.row.isEdit ? "完成" : "编辑"
              }}</el-button>
              <el-button @click="deleteUser(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="用户访问量/物流运输量" name="second">
        <iframe src="/statistics.html" style="height:90vh;width:88vw"></iframe>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      data: null,
      activeName: "first",
    };
  },
  methods: {
    // moment日期转换
    // formatTime(row, column) {
    //   const date = new Date(row[column.property]);
    //   if (!date) {
    //     return "";
    //   }
    //   let filters = this.$root.$options.filters;
    //   return filters.dataFormat(date, "YYYY-MM-DD");
    // },
    handleClick(row) {
      // 动态设置数据并通过这个数据判断显示方式
      if (row.isEdit) {
        // 2022.8.31 更新
        // 其实我们想要取消编辑状态的话不需要用下面这步
        // 直接使用 row.isEdit = false 就行
        // 因为 this.$set 后 isEdit 字段已经被 Vue 加上了响应式
        this.$delete(row, "isEdit");
        console.log(row);
        const params = `id=${row.id}&name=${row.name}&email=${row.email}&address=${row.address}&id_card=${row.id_card}&phone=${row.phone}&sex=${row.sex}&birthday=${row.birthday}`;
        this.axios.put("/user_change", params).then((res) => {
          console.log(res);
        });
      } else {
        this.$set(row, "isEdit", true);
      }
      console.log(this.tableData);
    },
    handle(row, column, cell, event) {},
    deleteUser(index, row) {
      console.log(index, row);

      let _this = this;
      if (!(index + 1)) {
        _this.$message.error("用户有误，请刷新后重试");
        return;
      } else {
        _this
          .$confirm("确定要删除此用户吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(function () {
            let goodIndex = 0;
            _this.tableData.forEach((item, id) => {
              console.log(item, id);
              if (item.id === index + 1) {
                goodIndex = id;
                console.log(goodIndex);
              }
            });
            _this.tableData.splice(goodIndex, 1);
            const params = `${row.id}`;
            console.log("params", params);
            _this.axios.delete("/" + params).then((res) => {
              console.log(res);
            });
          })
          .catch((e) => {
            console.log(e);
          });
      }
    },
  },
  mounted() {
    this.axios.get("/user_detail").then((res) => {
      console.log(res.data.data);
      this.tableData = res.data.data;
    });
  },
};
</script>

<style lang="scss" scoped>
</style>